<style lang="scss" scoped>
@import "@/assets/css/variable";
.activityShow {
  width: 100%;
  padding-bottom: 6.2rem;
  background-color: #f2f2f2;
  min-height: 100%;
  height: 100vh;
  font-size: 1.2rem;
  box-sizing: border-box;
  position: relative;
  flex: 1;
  // overflow: hidden;
  $radiusSize: 100%;
  display: flex;
  flex-direction: column;
  padding: 4rem 1rem 0;
  .my_tuan {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3rem;
    z-index: 2;
    // background: -webkit-linear-gradient(top, #fd8701, #fd8701);
    line-height: 3rem;
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #fff;
    .icon {
      position: absolute;
      top: 50%;
      left: 10px;
      transform: translateY(-50%);
    }
  }
  .van_field {
    box-sizing: border-box;
    margin-bottom: 10px;
    box-shadow:0px 3px 3px rgba(0, 0, 0, 0.2);
    height: 4rem;
    font-size: 1.2rem;
    display: flex;
    justify-content: space-between;
    line-height: 4rem;
    padding-left: 10px;
    color: #323233;
    background-color: #fff;
    .van-radio--horizontal {
      margin-right: 7px;
    }
  }
  .conter {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      width: 100%;
      height: 5rem; 
      background-color: #fff6e4;
      box-shadow:0px 3px 3px rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      margin-bottom: 1rem;
      color: #999;
      .num {
        width: 10%;
        height: 100%;
        line-height: 5rem;
        text-align: center;
        color: #f1c01b;
      }
      

        
        .middle_right {
          width: 100%;
          display: flex;
          justify-content: space-between;
          padding: 0 0.5rem;
          align-items: center;
          .envelope {
            display: flex;
            align-items: center;
            .time_title {
              display: flex;
              flex-direction: column;
              margin-left: 1.5rem;
            }
          }
      }
    }
  
  .retroaction {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    img {
      width: 5rem;
      height: 9rem;
    }
    span {
      text-align: center;
      margin-top: 20px;
      color: #999;
    }
  }
}
</style>
<template>
  <div class="activityShow">
    <div class="my_tuan" :style="{ backgroundColor: theme_color }">
      <van-icon class="icon" name="arrow-left" @click="iconClick" />
      <span>余额明细</span>
    </div>

     <div
      class="van_field"
    >
        <span>类型</span>
        <van-radio-group v-model="status" direction="horizontal">
          <van-radio name="1" @click="joinClick">不可用余额</van-radio>
          <van-radio name="2" @click="myClick">可用余额</van-radio>
        </van-radio-group>
      
    </div>

    
      <template v-if="rankingShow">
        <div class="conter" v-for="(item, index) in cashout" :key="index">
        
          <span class="num">{{index+1}}</span>

          <div class="middle_right">
              <div class="envelope">
                <!-- <div>
                    {{item.title}}
                </div> -->
                <div class="time_title">
                  <span>{{item.createtime}}</span>
                </div>
              </div>
              <div class="item_gifts_time">
                <span>{{(Number(item.one_commission) || 0) + (Number(item.two_commission)) || 0.00}}元</span>
              </div>
          </div>
        
      </div>
      </template>


      <template v-if="commissionShow">
        <div class="conter" v-for="(item, index) in  cashin" :key="index">
        
          <span class="num">{{index+1}}</span>

          <div class="middle_right">
              <div class="envelope">
                <!-- <div>
                    {{item.title}}
                </div> -->
                <div class="time_title">
                  <span>{{item.createtime}}</span>
                </div>
              </div>
              <div class="item_gifts_time">
                <span>{{(Number(item.one_commission) || 0) + (Number(item.two_commission)) || 0.00}} 元</span>
              </div>
          </div>
        
      </div>
      </template>
    
    
    <div class="retroaction" v-show="nodataShow">
      <img src="https://qiniu.longyue8.com/images/4/2021/07/rz7dUAdvZbe75tPAVA22UVTtazbTET.png" alt="">
      <span>暂无数据</span>
    </div>
    
  </div>
</template>

<script>
import {
  Button,
  Toast,
  Tab,
  Tabs,
  Icon,
  Dialog,
  Popup,
  Field,
  RadioGroup,
  Radio,
  Image as VanImage,
} from "vant";
import backgroudImg from './../../../assets/img/lq.png'
// import QRCode from 'qrcode'
// import html2canvas from 'html2canvas'
// import func from 'vue-editor-bridge';
// import utils from '@/assets/js/utils.js'
export default {
  name: "activityShow",
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Dialog.name]: Dialog,
    [Popup.name]: Popup,
    [Field.name]: Field,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [VanImage.name]: VanImage,

  },
  data() {
    return {
      backgroudImg: backgroudImg,
      openid: "",
      activity_id: null,
      theme_color: '',
      status: '2',
      envelopeList: [],
      commissionList: [],
      rankingShow: true,
      commissionShow: false,
      nodataShow: false,
      cashout: [],
      cashin: [],
    };
  },
  created() {
    console.log(this.$route);
    this.theme_color = this.$store.state.theme_color
    this.cashout = this.$store.state.cashout
    this.cashin = this.$store.state.cashin
    this.openid = localStorage.getItem("COPENID")
    this.activity_id = this.$route.query.activity_id
    this.getGroupMyGifts()
    // this.envelopeList = this.$store.state.envelopeList
    
    // this.openid = localStorage.getItem("COPENID")
    // const Item = JSON.parse(localStorage.getItem("OrderItem"));
    // this.openid = localStorage.getItem("COPENID")
    // this.activity_id = Item.activityItem.activitys_id;
    // this.getGroubody();
  },
  // computed: {
  //   getOpenId() {
  //     this.openid = this.$store.state.openid
  //     return this.openid
  //   }
  // },
  mounted() {},
  methods: {
    // 查询可用余额
    getGroupMyGifts() {
      this.rankingShow = true
      this.commissionShow = false
      if(this.cashout.length == 0) {
        this.nodataShow = true
      }
      // let params = {
      //   activity_id: this.activity_id,
      //   openid: this.openid
      // };
      // this.$request.getGroupMyGifts(params).then(res => {
      //   this.envelopeList = res.data.data
      //   if(this.envelopeList.length == 0) {
      //     this.nodataShow = true
      //   }
      // })
    },
    // 点击不可用余额
    joinClick() {
      this.rankingShow = false
      this.commissionShow = true
      this.nodataShow = false
      if(this.cashin.length == 0) {
        this.nodataShow = true
      }
      // let params = {
      //   activity_id: this.activity_id,
      //   openid: this.openid
      // };
      // this.$request.getGroupCommission(params).then(res => {
      //   this.commissionList = res.data.data
      //   if(this.commissionList.length == 0) {
      //     this.nodataShow = true
      //   }
      // })

    },
    // 点击可用余额
    myClick() {
      this.nodataShow = false
      this.getGroupMyGifts()
    },
    // 退回
    iconClick() {
      this.$router.go(-1);
    }
  },
};
</script>